svg

d3.svg.arc()는 파이차트의 모양을 결정하는 객체를 생성하는 코드

d3.layout.pie()는 파이 형태의 레이아웃을 제공한다.

var dataset=[10, 40, 80]

var svg=d3.select("#chart")

.append("svg")

.attr("width", 400)

.attr("height", 400);

var group=svg.append("g")

.attr("transform", "translate(200, 200)");

var arc=d3.svg.src()

.innerRadius(100)

.outerRadius(200);

var pie=d3.layout.pie()

.value(function(d){ return d; });

var arcs=group.selectAll(".arc")

.data(pie(dataset))

.enter()

.append("g")

.attr("class", "arc");

var color=d3.scale.ordinal()

.range(["red", "orange", "blue"])

arcs.append("path")

.attr("d", arc)

.attr("fill", function(d){ return color(d.data); });

arcs.append("text")

.attr("transform", function(d){ return "translate("+arc.centroid(d)+")"; })

.attr("text-anchor", "middle")

.attr("text-size", "10px")

.text(function(d){ return d.data });

for HTML

<!DOCTYPE html>

<html>

<head>

<title>D3.js PIE CHART</title>

</head>

<body>